<template>
  <div class="personInfor-page">
    <div class="personInfor-title">住房保障管理监测分析</div>
    <div class="personInfor-content">
      <!-- 保障住房建设分析 -->
      <div class="personInfor-gird personInfor-gird-one">
        <img class="personInfor-gird-title" src="@/assets/img/houseAdmin/title1.png" alt="" />
        <!-- 上 -->
        <div class="add-trend">
          <div class="add-trend-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房项目分析</span>
            </div>
            <div class="add-trend-l-content aaa">
              <div class="add-trend-l-content-top">
                <div>
                  当年保障房建设总量：<span>{{ houseAdminDataList?.constructionCount || 0 }}</span
                  >套 / <span>{{ houseAdminDataList?.constructionArea || 0 }}m²</span>
                </div>
                <div>
                  实物保障户数：<span>{{ houseAdminDataList?.censusRegisterCount || 0 }}</span> 万户
                </div>
              </div>
              <barLinePublic style="height: 100%;"
                v-if="leftTopLeft.xAxisData.length > 0"
                :housingSupplyStatsData="leftTopLeft"
                @dialogData="dialogData"
              ></barLinePublic>
            </div>
          </div>
          <div class="add-trend-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房利用分析</span>
            </div>
            <div class="add-trend-l-content">
              <div class="add-trend-l-content-top">
                <div>
                  当年保障房交付总量：<span>{{ houseAdminDataList?.deliveryCount || 0 }}</span
                  >套 / <span>{{ houseAdminDataList?.deliveryArea || 0 }}m²</span>
                </div>
                <div>
                  配租率：<span>{{ houseAdminDataList?.hireRate || 0 }}%</span> 
                </div>
              </div>
              <barLinePublic
              v-if="leftTopRight.xAxisData.length > 0"
              :housingSupplyStatsData="leftTopRight"
              class="aaa"
              @dialogData="dialogData"
            ></barLinePublic>
            </div>
          </div>
        </div>
        <!-- 中 -->
        <div class="add-trend">
          <div class="add-trend-three-l aaa">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房计划筹建与完成度</span>
            </div>
              <bar-more-public
              v-if="personHousePopulationData.xAxisData.length > 0"
              :housingSupplyStatsData="personHousePopulationData"
              @dialogData="dialogData"
            ></bar-more-public>
          </div>
          <div class="add-trend-three-c">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房建设周期</span>
            </div>
              <bar-pie-one-public
              v-if="leftCenterCenter.seriesData.length > 0"
              :housingSupplyStatsData="leftCenterCenter"
              class="aaa"
              @barPiemagnify="barPiemagnify"
            ></bar-pie-one-public>
          </div>
          <div class="add-trend-three-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房类型统计</span>
            </div>
              <bar-pie-two-public
              v-if="leftCenterRight.seriesData.length > 0"
              :housingSupplyStatsData="leftCenterRight"
              class="aaa"
              @barPiemagnify="barPiemagnify"
            ></bar-pie-two-public>
          </div>
        </div>
        <!-- 下 -->
        <div class="add-trend">
          <div class="add-trend-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房建设投资分析</span>
            </div>
              <barLinePublic
              class="aaa"
              v-if="leftBottomLeftData.xAxisData.length > 0"
              :housingSupplyStatsData="leftBottomLeftData"
              @dialogData="dialogData"
            ></barLinePublic> 
          </div>
          <div class="add-trend-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障住房覆盖面分析</span>
            </div>
              <line-gradual-public
              v-if="leftBottomRightData.xAxisData.length > 0"
              :housingSupplyStatsData="leftBottomRightData"
              class="aaa"
              @dialogData="dialogData"
            ></line-gradual-public>
          </div>
        </div>
      </div>
      <!-- map -->
      <div class="personInfor-gird" style="position: relative; background-color: rgba(0, 0, 0, 0)">
        <mapBox
          v-if="personHouseMiddleData.regions[0].length > 0"
          :housingSupplyStatsData="personHouseMiddleData"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
        ></mapBox>
        <div class="real-statistics">
          <div class="real-statistics-title">今日实时统计</div>
          <div class="real-statistics-top">
            <div class="real-statistics-top-title">
              保障房源(套)
            </div>
            <div class="real-statistics-top-num">
              <div class="real-statistics-top-index" v-for="(item,index) in houseCount" :key="index">{{ item }}</div>
            </div>
          </div>
          <div class="real-statistics-top">
            <div class="real-statistics-top-title">
              保障对象(人)
            </div>
            <div class="real-statistics-top-num">
              <div class="real-statistics-top-index" v-for="(item,index) in peopleCount" :key="index">{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
      </div>
       <!-- 保障住房项目排名统计 -->
      <div class="personInfor-gird personInfor-gird-four">
        <div class="personInfor-four-center">
          <img class="personInfor-gird-title" src="@/assets/img/houseAdmin/title4.png" alt="" />
          <table-list
            v-if="personHouseMiddleListData.list.length > 0"
            :housingSupplyStatsData="personHouseMiddleListData"
            style="width: 100%; height: 100%"
          ></table-list>
        </div>
        <div class="personInfor-four-bottom">
          <img class="personInfor-gird-title" src="@/assets/img/houseAdmin/title5.png" alt="" />
          <div class="add-trend">
          <div class="add-trend-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>租凭补贴发放统计</span>
            </div>
            <barLinePublic
              v-if="centerBottomLeftData.xAxisData.length > 0"
              :housingSupplyStatsData="centerBottomLeftData"
              class="aaa-b"
               @dialogData="dialogData"
            ></barLinePublic>
          </div>
          <div class="add-trend-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>租凭补贴任务指标及完成率</span>
            </div>
            <barLinePublic
              v-if="centerBottomRightData.xAxisData.length > 0"
              :housingSupplyStatsData="centerBottomRightData"
               class="aaa-b"
              @dialogData="dialogData"
            ></barLinePublic>
          </div>
        </div>
        </div>
      </div>
      <!-- 保障房对象统计 -->
      <div class="personInfor-gird personInfor-gird-five">
        <img class="personInfor-gird-title" src="@/assets/img/houseAdmin/title2.png" alt="" />
        <div class="add-trend">
          <div class="add-trend-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障对象资质统计</span>
            </div>
            <bar-oval-public
            v-if="rightTopLeftData.xAxisData.length > 0"
              :housingSupplyStatsData="rightTopLeftData"
              class="r-aaa"
              @dialogData="dialogData"
            ></bar-oval-public>
          </div>
          <div class="add-trend-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障对象数量分析</span>
            </div>
            <barLinePublic
              class="r-aaa"
              v-if="rightTopRightData.xAxisData.length > 0"
              :housingSupplyStatsData="rightTopRightData"
              @dialogData="dialogData"
            ></barLinePublic>
          </div>
        </div>
        <div class="add-trend">
          <div class="add-trend-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障方式分析</span>
            </div>
            <usePie  class="r-aaa" @dialogPieData="dialogPieData" :housingSupplyStatsData="rightTopChildbottomLeftData" v-if="rightTopChildbottomLeftData.seriesData.length > 0"></usePie>
          </div>
          <div class="add-trend-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障对象家庭结构统计</span>
            </div>
            <usePie  class="r-aaa" @dialogPieData="dialogPieData" :housingSupplyStatsData="rightTopChildBottomRightData" v-if="rightTopChildBottomRightData.seriesData.length > 0"></usePie>
          </div>
        </div>
      </div>
      <!-- 保障房配租分析 -->
      <div class="personInfor-gird personInfor-gird-six">
        <img class="personInfor-gird-title" src="@/assets/img/houseAdmin/title3.png" alt="" />
        <!-- 上 -->
        <div class="add-trend">
          <div class="add-trend-three-l">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障房供应户型分析</span>
            </div>
              <barLinePublic
              v-if="rightBottomChildTopLeftData.xAxisData.length > 0"
              :housingSupplyStatsData="rightBottomChildTopLeftData"
              class="echartH"
              @dialogData="dialogData"
            ></barLinePublic>
          </div>
          <div class="add-trend-three-c">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障房租金分析</span>
            </div>
            <barLinePublic
              v-if="rightBottomChildTopCenterData.xAxisData.length > 0"
              :housingSupplyStatsData="rightBottomChildTopCenterData"
              class="echartH"
              @dialogData="dialogData"
            ></barLinePublic>
          </div>
          <div class="add-trend-three-r">
            <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障房配租周期聚类分析</span>
            </div>
            <usePie  class="echartH" @dialogPieData="dialogPieData" :housingSupplyStatsData="rightBottomChildTopCRightData" v-if="rightBottomChildTopCRightData.seriesData.length > 0"></usePie>
          </div>
        </div>
        <!-- 下 -->
        <div class="personInfor-four-bottom" style="padding-left: 10px;">
          <div class="small-title">
              <img class="small-title-logo" src="@/assets/img/personInfor/small-title-logo.png" alt="" />
              <span>保障对象分布情况</span>
            </div>
            <barLinePublic
              v-if="rightBottomChildBottom.xAxisData.length > 0"
              :housingSupplyStatsData="rightBottomChildBottom"
              class="r-aaa1"
              @dialogData="dialogData"
            ></barLinePublic>
        </div>
      </div>
    </div>
    <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
    ></magnify>
    <magnifyPie
      v-if="magnifyPieEchartData"
      :housingSupplyStatsData="magnifyPieEchartData"
      @closePieDialog="closePieDialog"
    ></magnifyPie>
    <barPiemagnifys
      v-if="magnifyPieEcData"
      :housingSupplyStatsData="magnifyPieEcData"
      @closeBarPiemagnify="closeBarPiemagnify"
    ></barPiemagnifys>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from "vue";
import usePie from "@/components/public/pie.vue"
import barLinePbulic from "@/components/houseAdmin/barLinePbulic.vue";
import barOvalPublic from "@/components/houseAdmin/barOvalPublic.vue"
import barMorePublic from "@/components/houseAdmin/barMorePublic.vue"
import barPieOnePublic from "@/components/houseAdmin/barPieOnePublic.vue"
import barPieTwoPublic from "@/components/houseAdmin/barPieTwoPublic.vue"
import lineGradualPublic from "@/components/houseAdmin/lineGradualPublic.vue"
import tableList from "@/components/houseAdmin/tableList.vue";
import mapBox from "@/components/houseAdmin/map.vue";
import barLinePublic from "@/components/public/barLinePbulic.vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import magnify from "@/components/public/magnify.vue";
import magnifyPie from "@/components/public/magnifyPie.vue";
import barPiemagnifys from "@/components/houseAdmin/barPiemagnify.vue";
import { getCityName } from '@/utils/cityList'
import {
  getPersonHouseMiddle,
} from "@/api/personInfor";
import {
  selectHousingAnalyse,
  selectRateOfIncrease, 
  selectCoverage,
  selectInterStatistics,
  selectSupplyList,
  selectSubsidyInfo,
  selectSubsidyGrantRate,
  selectCertificationStatistics,
  selectSafeguardCountStatistics,
  selectSafeguardWay,
  selectSafeguardFamily,
  selectSafeguardHouseType,
  selectSafeguardRent,
  selectSafeguardPeriod,
  selectSafeguardDistribute,
  selectThermodynamic,
  selectTenementCount,
  selectPlanConstruction,
  selectConstructionPeriod,
  selectInvestorAnalyse,
  selectTypeStatistics,
} from "@/api/houseAdmin";
// 数据部分
const fixedCityCode =   localStorage.getItem("cityCode")
const magnifyEchartData = ref(null)//放大框
const magnifyPieEchartData = ref(null)//饼图放大框
const magnifyPieEcData = ref(null)

const houseAdminDataList = ref({
  censusRegisterCount: 0,//实物保障户数
  constructionArea: 0,//当年保障房建设总面积
  constructionCount: 0,//当年保障房建设总量
  deliveryArea: 0,//当年保障房交付面积
  deliveryCount:0,//当年保障房交付总量
  dwellRate:0,//入住率
  hireRate:0,//配租率
});
const leftTopLeft = ref({//保障住房项目分析
    xAxisData: [],
})
const leftTopRight = ref({//保障住房利用分析
    xAxisData: [],
})
const personHousePopulationData = ref({//保障住房计划凑将与完成度
  xAxisData: [],
});
const leftCenterCenter = ref({//保障住房建设周期
  seriesData:[]
})
const leftCenterRight = ref({//保障住房类型统计
  seriesData:[]
})

const leftBottomLeftData = ref({//保障住房建设投资分析
   xAxisData: [],
});
const leftBottomRightData = ref({//保障住房覆盖面分析
   xAxisData: [],
});
const centerBottomLeftData = ref({//租凭补贴发放统计
  xAxisData:[],
}) 
const centerBottomRightData = ref({//租凭补贴任务指标及完成率
  xAxisData:[],
})
const rightTopLeftData = ref({//保障对象资质统计
    xAxisData: [],
})
const rightTopRightData = ref({//保障住房数量分析
    xAxisData: [],
})
const rightTopChildbottomLeftData = ref({//保障方式分析
  seriesData:[]
})
const rightTopChildBottomRightData = ref({//保障对象家庭统计
  seriesData:[],
})
const rightBottomChildTopLeftData = ref({//保障房供应户型分析
  xAxisData:[],
})
const rightBottomChildTopCenterData = ref({//保障房租金分析
  xAxisData:[],
})
const rightBottomChildTopCRightData = ref({//保障房配租周期聚类分析
  seriesData:[]
})
const rightBottomChildBottom = ref({//保障对象分布情况
  xAxisData:[],
})
 
const personHousePopulationRightData = ref({
  xAxisData: [],
});
const personHousePopulationCenterData = ref({
  xAxisData: [],
})
const personHouseMiddleData = ref({
  regions: [[]],
});
const personHouseMiddleListData = ref({
  list: [],
});
const personHouseCommodityData = ref({
  dateList: [],
});
const carouselInd = ref(0);
const mapLable = ref(["申请", "配租", "补贴金额", "在建"]);
const cityObj = ref({
  cityName: "",
  cityCode: "",
});
const houseCount = ref([
  '0','0','0','0','0'
])
const peopleCount = ref([
  '0','0','0','0','0'
])
// 数据部分
import usePersonHouseData from "@/hooks/personInfor/usePersonInfor";
const personHouseData = usePersonHouseData();
//保障住房建设分析数据
const getSelectHousingAnalyse = async() => {
  let { data } = await selectHousingAnalyse({ cityCode: cityObj.value.cityCode });
  houseAdminDataList.value = data
}
//保障住房建设分析-保障住房项目分析
const getSelectRateOfIncrease = async() => {
  let { data } = await selectRateOfIncrease({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0",
    right: "15%",
    bottom: "5%",
    top: "42%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {
        name: "户数",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#F0968F",
        b: "#F9C791",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
            {
        a: "#2BD9DA",
        b: "#1C619B",
      },
      {
        a: "#2BD9DA",
        b: "#1C619B",
      },
      {
        a: "#3DE1B9",
        b: "#BFF789",
      },  
      {
        a: "#3DE1B9",
        b: "#BFF789",
      },
    ],
    legendStyle,
    gridConfig
  );
    leftTopLeft.value = paramsData
}
//保障住房建设分析-保障住房利用分析
const getSelectTenementCount = async() => {
  let { data } = await selectTenementCount({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0",
    right: "15%",
    bottom: "5%",
    top: "42%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {
        name: "人/套",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#2BD9DA",
        b: "#1C619B",
      },
      {
        a: "#3DE1B9",
        b: "#BFF789",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
    ],
    legendStyle,
    gridConfig
  );
    leftTopRight.value = paramsData
}
//保障住房建设分析-保障住房计划筹建与完成度
const getSelectPlanConstruction = async() => {
  let { data } = await selectPlanConstruction({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let paramsData = {
    legendData:data.nameList,
    xAxisData: data.year,
    yAxisData: ["金额(万元)"],
    typeData: ["bar", "bar"],
    seriesData: lineBarArr,
    colors: [
       {
        a: "#02BD6E",
        b: "#02BD6E",
      },
      {
        a: "#FACD91",
        b: "#FACD91",
      },
    ],
    
  };
  personHousePopulationData.value = paramsData;
}
//保障住房建设分析-保障住房建设周期
const getSelectConstructionPeriod = async() => {
  let { data } = await selectConstructionPeriod({ cityCode: cityObj.value.cityCode });
  let paramsData = {
    legendData: data.nameList,
    seriesData: data.resultList
  };
  leftCenterCenter.value = paramsData
}
//保障住房建设分析-保障住房类型统计
const getSelectTypeStatistics = async() => {
  let { data } = await selectTypeStatistics({ cityCode: cityObj.value.cityCode });
  let paramsData = {
    legendData: data.nameList,
    seriesData: data.resultList,
    colors:['#5470C6','#91CC75','#FAC858','#EE6666','#73C0DE']
  };
  leftCenterRight.value = paramsData
}
//保障住房建设分析-保障住房建设投资分析
const getSelectInvestorAnalyse = async()=>{
  let { data } = await selectInvestorAnalyse({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 1
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 30,
    top: 0,
    right:20,
    itemWidth: 24,
    itemHeight: 12,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0",
    right: "10%",
    bottom: "5%",
    top: "28%",
  };
  let paramsLeftBottomLeftData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
      {
        name: "",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#02BD6E",
        b: "#02BD6E",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
    ],
    legendStyle,
    gridConfig
  );
  leftBottomLeftData.value = paramsLeftBottomLeftData
}
//保障住房建设分析-保障住房覆盖面分析
const getSelectCoverage = async()=>{
  let { data } = await selectCoverage({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeName;
    if(lineBarType[i] == 1){
      typeName = "bar"
    }else{
      typeName = "line"
    }
    seriesType.push(typeName)
  }
  let leftBottomRight = {
    legendData:data.nameList,
    xAxisData: data.year,
    yAxisData: ["套数(万套)"],
    typeData: seriesType,
    seriesData: lineBarArr,
    colors: [
     {
        a: "rgba(109,126,218, 0.8)",
        b: "rgba(109,126,218, 0)",
      },
      {
        a: "rgba(122,235,239, 0.8)",
        b: "rgba(122,235,239, 0)",
      },
    ],
  }
  leftBottomRightData.value = leftBottomRight
}
//今日实时统计
const getSelectInterStatistics = async() => {
  let { data } = await selectInterStatistics({ cityCode: cityObj.value.cityCode });
// const houseCount =ref(0);
// const peopleCount = ref(0)
   const houseSize:number = data.houseCount 
   const peopleSize:number = data.peopleCount
   houseCount.value = houseSize.toString().split("")
   peopleCount.value = peopleSize.toString().split("")
   const houseCountLength:number = 5-houseCount.value.length
   const peopleCountLength:number = 5-peopleCount.value.length
   for(let i = 0;i<houseCountLength;i++){
      houseCount.value.unshift('0')
   }
   for(let i = 0;i<peopleCountLength;i++){
      peopleCount.value.unshift('0')
   }
}
//保障房项目排名统计
const getSelectSupplyList = async() => {
  let { data } = await selectSupplyList({ cityCode: cityObj.value.cityCode});
   personHouseMiddleListData.value.list = data;
}
//租凭补贴发放统计-租凭补贴发放统计
const getSelectSubsidyInfo = async() => {
  let { data } = await selectSubsidyInfo({ cityCode: cityObj.value.cityCode });
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top:'90%',
    bottom:'10%',
    itemWidth: 24,
    itemHeight: 12,
    itemGap: 16,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "15%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {

        type: "1",
      },
      {
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.dubsidyCountList,data.dubsidyMoneyList],
    [
      {
        a: "#4F81BD",
        b: "#4F81BD",
      },
      {
        a: "#BE4B48",
        b: "#BE4B48",
      },
    ],
    legendStyle,
    gridConfig
  );
  centerBottomLeftData.value = paramsData
}
//租凭补贴发放统计-租凭补贴任务指标及完成率
const getSelectSubsidyGrantRate = async() => {
  let { data } = await selectSubsidyGrantRate({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left:192,
    itemWidth: 24,
    itemHeight: 12,
    itemGap: 16,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "15%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
    {
        a: "#FACD91",
        b: "#FACD91",
      },
      {
        a: "#02BD6E",
        b: "#02BD6E",
      },
    ],
    legendStyle,
    gridConfig
  );
  centerBottomRightData.value = paramsData
}
//保障对象统计-保障对象资质统计
const getSelectCertificationStatistics = async() => {
  let { data } = await selectCertificationStatistics({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let paramsRightTopLeft = {
    legendData: data.nameList,
    xAxisData: data.year,
    yAxisData: ["人数"],
    typeData: ["bar", "bar","bar"],
    seriesData: lineBarArr,
    colors: [
    {
        a: "#2BD9DA",
        b: "#1C619B",
      },
      {
        a: "#ED848E",
        b: "#F9C991",
      },
      {
        a: "#2BD4D8",
        b: "#03A8EF",
      },
    ],
    
  };

  rightTopLeftData.value = paramsRightTopLeft
}
//保障对象统计-保障对象数量分析
const getSelectSafeguardCountStatistics = async() => {
  let { data } = await selectSafeguardCountStatistics({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left:170,
    itemWidth: 24,
    itemHeight: 12,
    itemGap: 16,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "7%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.year,
    [
      {
        name: "万人",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#28BECC",
        b: "#1D619C",
      },
      {
        a: "#24D8D7",
        b: "#02C0C0",
      },
    ],
    legendStyle,
    gridConfig
  );
  rightTopRightData.value = paramsData
}
//保障对象统计-保障方式分析
const getSelectSafeguardWay = async() => {
  let { data } = await selectSafeguardWay({ cityCode: cityObj.value.cityCode });
  let paramsRightTopChildbottomLeftData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: true,
        icon: "rect",
        left:0,
        top:1,
        bottom: 0,
        right:0,
        itemWidth: 15,
        itemHeight: 8,
        itemGap:3,
    },
     seriesStyle:{
        radius: [35, 60],
        center: ['55%', '55%'],
        roseType: 'area',
        minAngle: pxToRem(100),
        labelLine: {
            show: true,//数据标签引导线
            length: 1,
        },
        emphasis: {
        label: {
          show: true,
          }
        },
        label: {
          show: true,
          textStyle: {
            fontSize: 12, // 标签字体大小
            backgroundColor:'rgba(0,0,0,0)',
            color:'#fff'
          },
        }

    },
    seriesData:[data.resultList]    
 }
 rightTopChildbottomLeftData.value = paramsRightTopChildbottomLeftData
}
//保障对象统计-保障对象家庭结构统计
const getSelectSafeguardFamily = async() => {
let { data } = await selectSafeguardFamily({ cityCode: cityObj.value.cityCode });
let echartParams = {
    gridStyle:{
      show:true
    },
    legendStyle:{
      show: true,
      icon: "rect",
      left: 'center', // 设置图例居中
      top:1,
      bottom: 0,
      right:0,
      itemWidth: 15,
      itemHeight: 8,
      itemGap:3,
  },
    seriesStyle:{
      radius: [35, 60],
      center: ['55%', '55%'],
      itemStyle: {
        borderRadius: 5,
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },


  },
  seriesData:[data.resultList]  
  } 
  rightTopChildBottomRightData.value = echartParams
}
//保障房配租分析-保障房供应户型分析计
const getSelectSafeguardHouseType = async() => {
  let { data } = await selectSafeguardHouseType({ cityCode: cityObj.value.cityCode });
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 1,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "42%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.xList,
    [
      {
        name: "人/套",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.requestList,data.supplyList],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
    ],
    legendStyle,
    gridConfig
  );
  rightBottomChildTopLeftData.value = paramsData;
}
//保障房配租分析-保障房租金分析
const getSelectSafeguardRent = async() => {
  let { data } = await selectSafeguardRent({ cityCode: cityObj.value.cityCode });
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 1,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "42%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.xList,
    [
      {
        name: "金额(万元)",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
    ],
    legendStyle,
    gridConfig
  );
  rightBottomChildTopCenterData.value = paramsData;
  
}
//保障房配租分析-保障房配租周期聚类分析
const getSelectSafeguardPeriod = async() => {
  let { data } = await selectSafeguardPeriod({ cityCode: cityObj.value.cityCode });
  let paramsData = {
      gridStyle:{
        show:true
      },
      legendStyle:{
        show: true,
        icon: "rect",
        left:0,
        top:'80%',
        bottom: 0,
        right:0,
        itemWidth: 12,
        itemHeight: 12,
        itemGap:3,
    },
     seriesStyle:{
        radius: [30, 55],
        center: ['50%', '40%'],
        roseType: 'area',
        minAngle: pxToRem(100),
        labelLine: {
            show: true,//数据标签引导线
            length:1,
        },
        emphasis: {
        label: {
          show: true,
          }
        },
        label: {
          show: true,
          textStyle: {
            fontSize: 12, // 标签字体大小
            backgroundColor:'rgba(0,0,0,0)',
            color:'#fff'
          },
        }

    },
    seriesData:[data.resultList]    
 }
  rightBottomChildTopCRightData.value = paramsData
}
//保障房配租分析-保障对象分布情况
const getSelectSafeguardDistribute = async() => {
  let { data } = await selectSafeguardDistribute({ cityCode: cityObj.value.cityCode });
  let legendStyle = {
    show: true,
    icon: "rect",
    top:0,
    right: 10,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 16,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "10%",
    top: "20%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.cityList,
    [
      {
        name: "人数",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.resultRequestList,data.resultSupplyList],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0968F",
        b: "#F9C791",
      },
    ],
    legendStyle,
    gridConfig
  );
  rightBottomChildBottom.value = paramsData;
}
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// 地图
const personHouseMiddle = async () => {
  // let { data } = await getPersonHouseMiddle({ adcode: cityObj.value.cityCode });
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  // 顶部地图
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false
  }));
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  personHouseMiddleData.value = paramsData
};
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
    type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

}
// 子组件触发当前选中项
const mapNameChange = (data: any) => {
  if (cityObj.value.cityName == data.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = data;
    allFun();
  }
};
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
// 打开饼图弹框
const dialogPieData = (val) => {
  magnifyPieEchartData.value = val
}
//关闭饼图弹框
const closePieDialog = (val) => {
  magnifyPieEchartData.value = null
}
const barPiemagnify = (val) => {
  magnifyPieEcData.value = val
}
const closeBarPiemagnify = (val) => {
  magnifyPieEcData.value = null
}

const allFun = () => {
  personHouseMiddle();
  getSelectRateOfIncrease();
  getSelectHousingAnalyse();
  getSelectTenementCount();
  getSelectPlanConstruction();
  getSelectConstructionPeriod();
  getSelectTypeStatistics();
  getSelectInvestorAnalyse()
  getSelectCoverage();
  getSelectInterStatistics();
  getSelectSupplyList();
  getSelectSubsidyInfo();
  getSelectSubsidyGrantRate();
  getSelectCertificationStatistics();
  getSelectSafeguardCountStatistics();
  getSelectSafeguardWay();
  getSelectSafeguardFamily();
  getSelectSafeguardHouseType();
  getSelectSafeguardRent();
  getSelectSafeguardPeriod();
  getSelectSafeguardDistribute()
};
allFun();
onMounted(() => {
});

onUnmounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});
</script>

<style scoped lang="less">
.personInfor-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/personInfor/bg.png"); 
  background-size: 100% 100%;
  color: #fff;
  overflow: auto;
   // 隐藏滚动条
   &::-webkit-scrollbar {
    width: 0px;
  }
  .personInfor-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 26px;
    background: url("@/assets/img/personInfor/header-bg.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .personInfor-content {
    width: 100vw;
    height: calc(100vh - 111px);
    display: grid;
    grid-gap: 17px 31px;
    grid-template-columns: repeat(3, 587px);
     grid-template-rows: 297px 145px  470px;
    place-content: start center;
    .personInfor-gird {
      color: #fff;
      background: rgba(9, 70, 145, 0.15);
      .personInfor-gird-title {
        width: 100%;
        height: 46px;
      }
      .add-trend {
        display: flex;
        padding: 11px 11px 11px 6px;
        box-sizing: border-box;
        .add-trend-l,
        .add-trend-r {
          width: 50%;
        }
        .add-trend-three-l,
        .add-trend-three-c,
        .add-trend-three-r{
          width: 33%;
        }
      }
    }
    .personInfor-gird-one{
      grid-column: 1 / 1;
      grid-row: 1 / 4;
    }
    .personInfor-gird-four {
      grid-column: 2 / 3;
      grid-row: 2 / 4;
      background: rgba(9, 70, 145, 0);
      .personInfor-four-center {
        height: 227px;
        margin-top: 15px;
        margin-bottom: 15px;
        background: rgba(9, 70, 145, 0.15);
      }
      .personInfor-four-bottom {
        height: 375px;
        background: rgba(9, 70, 145, 0.15);
        position: relative;
        .personInfor-four-bottom-title {
          position: absolute;
          top: 52px;
          right: 14px;
          font-size: 14px;
          color: #ffffff;
          .num {
            background: linear-gradient(180deg, #ffffff, #e4871d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 18px;
          }
        }
      }
    }
    .personInfor-gird-five{
      grid-column: 3 / 3;
      grid-row: 1 / 3;
    }
    .personInfor-gird-six{
      grid-column: 3 / 3;
      grid-row: 3 / 4;
    }
  }
}

.small-title {
  font-size: 14px;
  color: #c5fffd;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  .small-title-logo {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}

.add-trend-l-content-top {
  font-size: 12px;
  color: #ffffff;
  line-height: 17px;
  letter-spacing: 1.2px;
  margin: 15px 0px;
  div {
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      background: linear-gradient(180deg, #ffffff, #e4871d);
      -webkit-background-clip: text; /* 添加这一行用于兼容性 */
      -webkit-text-fill-color: transparent; /* 添加这一行用于兼容性 */
    }
  }
}

::v-deep .custom-carousel {
  width: 100%;
  height: 223px;
}

.map-lable {
  position: absolute;
  bottom: 0px;
  right: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1.2px;
  div {
    width: 150px;
    height: 30px;
    margin-top: 6px;
    text-align: center;
    background: url("@/assets/img/personInfor/map-lable.png");
    background-size: 100% 100%;
    cursor: pointer;
    font-size: 16px;
  }
  .active {
    background: url("@/assets/img/personInfor/map-lable-active.png");
    background-size: 100% 100%;
  }
}

.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.aaa{
  height: 240px;
}
.r-aaa{
  height: 165px;
}
.echartH{
  height: 185px;
}
.r-aaa1{
  height:180px;
}
.aaa-b{
  height: 300px;
}
.real-statistics{
  position: absolute;
  bottom:-0px;
  .real-statistics-title{
    font-size: 18px;
  }
  .real-statistics-top-title{
    margin-top: 8px;
    font-size: 14px;
    color: #A6ECEA;
  }
  .real-statistics-top-num{
    margin-top: 6px;
    display: flex;
    .real-statistics-top-index{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 400;
      width: 18px;
      height: 27px;
      background: linear-gradient( 180deg, #032557 0%, rgba(3,37,87,0) 100%);
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(96.00000187754631, 245.00000059604645, 240.00000089406967, 1), rgba(96.00000187754631, 245.00000059604645, 240.00000089406967, 0.20000000298023224)) 1 1;
      margin: 0px 5px;
    }
    .real-statistics-top-index:first-child{
      margin-left: 0px;
    }
  }
}
</style>
